<template>
  <div class="all-icon-container" v-for="oneLevel in list" :key="oneLevel.id">
    <div class="icon-container">
      <div class="theme">
        {{ oneLevel.name }}
        <el-input style="width: 20%"
                  v-model.trim="searchValue"
                  :prefix-icon="Search"
                   filterable
                  @input="handleInput"
                  v-if="oneLevel.name==='公共组件'">
          <el-option v-for="(item,index) in filteredList" :key="index" :label="item.name" :value="item.name"></el-option>
        </el-input>
      </div>
      <div class="icon-and-download">
        <template v-for="item in oneLevel.children" :key="item">
          <IconAndDown :name="item.name" :url="item.downloadUrl" :illustrate="item.description" :type="item.type"
                       :docId="item.documentId" :icon="item.realFileUrl"/>
        </template>
      </div>
    </div>
    <el-divider/>
  </div>
</template>
<script setup>
import IconAndDown from '@/components/homeIndex/IconAndDown.vue'
import {Search} from '@element-plus/icons-vue'

import FrontApi from '@/api/front'
import {inject, ref} from 'vue'

const list = ref([])
const bak = ref([])
const show = inject('show')
const searchValue = ref('')
const filteredList = ref([])

FrontApi.getComponentList("1").then(res => {
  list.value = res.data
  bak.value = res.data
  show.value = true
})

const handleInput = (name) => {
  const lowerCaseName = name.toLowerCase()
  list.value = bak.value.map(item => {
    if (item.name === "公共组件") {
      filteredList.value = item.children.filter(child => child?.name.toLowerCase().includes(lowerCaseName))
      console.log(filteredList.value)
      return {
        ...item,
        children: filteredList.value
      }
    }
    return item
  })
}



</script>
<style scoped>
.all-icon-container {
  /* margin: 11.2rem 24rem; */
  margin: 4rem 24rem;
}

.icon-container {
  min-height: 35.51%;
}

.theme {
  font-weight: bold;
  color: var(--el-text-color-regular);
  font-size: 2.6rem;
  display: flex;
  justify-content: space-between;
}

.icon-and-download {
  margin-top: 4.8rem;
  display: flex;
  flex-wrap: wrap;
  min-height: 19rem;
}

.icon-and-download-block {
  width: 33.33%;
  margin-bottom: 8rem;
}

.el-divider {
  margin: 0rem 1rem 8rem 1rem;
}
</style>
